<template>
  <el-menu
    :default-active="activeIndex"
    class="navTop_box"
    mode="horizontal"
    :ellipsis="false"
  >
    <el-menu-item index="0" @click="collapseNavMenu">
      <el-icon>
        <component :is="icon ? Fold : Expand"></component>
      </el-icon>
    </el-menu-item>
    <el-menu-item index="1" class="navTop_menu_item">
      <navBreadcrumb></navBreadcrumb>
    </el-menu-item>
    <div class="flex-grow" />
    <el-menu-item index="3">Processing Center</el-menu-item>
    <el-sub-menu index="4">
      <template #title>Workspace</template>
      <el-menu-item index="4-1">item one</el-menu-item>
      <el-menu-item index="4-2">item two</el-menu-item>
      <el-menu-item index="4-3">item three</el-menu-item>
      <el-sub-menu index="4-4">
        <template #title>item four</template>
        <el-menu-item index="4-4-1">item one</el-menu-item>
        <el-menu-item index="4-4-2">item two</el-menu-item>
        <el-menu-item index="4-4-3">item three</el-menu-item>
      </el-sub-menu>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import navBreadcrumb from '@/components/Menu/navBreadcrumb/navBreadcrumb.vue'
import { Expand, Fold } from '@element-plus/icons-vue'
import { useStore } from '@/store/user'

const store = useStore()
const activeIndex = ref('3')
let icon = ref(false)
//菜单切换
const collapseNavMenu = (e) => {
  //切换图标
  icon.value = !icon.value
  store.collapseIcon = icon.value
}
</script>

<style lang="less">
.flex-grow {
  flex-grow: 1;
}
.navTop_box {
  display: flex;
  align-items: center;
  border-bottom: none !important;
  .navTop_menu_item {
    //清除hover样式
    pointer-events: none;
  }
}
</style>
